<template>
  <section class="top" id="details" v-loading="loading">
    <!--banner-->
    <div class="plan_banner report" v-if="preview"
         :style="{
      background: 'url('+preview.productImg+') right no-repeat',
      backgroundSize: 'cover'}">
      <div class="main-width cl">
        <div class="plan_text details_text ">
          <h4 class="details_title  slideInUp animated">{{preview.productName}}</h4>
          <p class=" slideInUp animated">{{preview.productSlogan}}</p>
          <a href="javascript:;" class="btn">{{preview.btn}}</a>
        </div>
      </div>
    </div>
    <!--轻松驾驭报表-->
    <div class="product_advantage product" style="background: rgb(239, 248, 255)">
      <div class="main-width">
        <h1 class="content_region_title" style="color: rgba(0,0,0,.65);font-weight: initial;font-size: 30px">轻松驾驭报表</h1>
        <ul class=" cl reportData" >
          <li v-for="item in reportData" >
            <div class="report-item"
                 :style="{backgroundImage: 'url('+item.icon+')'}">
              <h2>{{item.title}}</h2>
              <p v-for="(child, index) in item.list">
                <i>{{index + 1}}</i>
                {{child}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--报表样例-->
    <div class=" sample">
      <div class="main-width product_advantage" :style="{
        backgroundImage: 'url('+js_bg_01+')',
        backgroundSize: '100% 100%',
        paddingBottom: '0'
        }">
        <div class="sampleData clearfix" :style="{backgroundImage: 'url('+baobiaopeitu+')'}">
          <div class="sample-title">报表样例</div>
          <div class="sample-item" v-for="item in sampleData">{{item}}</div>
        </div>
      </div>
    </div>
    <!--每个功能点，都是精雕细琢-->
    <section class="serviced_made mt-40"
             :style="{
          backgroundImage: 'url('+baobiaobg+')',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '120% 100%'}">
      <div class="made_container pt-40 pb-30 introduce-wary">
        <h2 class="fwei-nor f30 text-c" style="color: rgb(53, 158, 226)">每个功能点，都是精雕细琢</h2>
        <h2 class="fwei-nor f16 text-c mt-10" style="color: black">十年沉淀，行业精选，一切都从用户实际需求出发，到用户实际应用中去</h2>
        <ul class="mt-40 cl" style="padding: 0 2rem">
          <li v-for="item in introduceData" class="introduce-item flex">
            <img v-lazy="item.icon" :key="item.icon"/>
            <div class="cell">
              <p class="introduce-title" v-text="item.title"></p>
              <p v-for="child in item.content" >{{child}}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!--轻松驾驭中国式复杂报表-->
    <section class="serviced_made mt-40" style="background: #fff">
      <div class="made_container pt-40 pb-30 introduce-wary">
        <h2 class="fwei-nor f30 text-c" style="color: rgb(53, 158, 226)">轻松驾驭中国式复杂报表</h2>
        <ul class="mt-40 cl" style="padding: 0 2rem">
          <li v-for="item in complexData" class="introduce-item flex complex-item" style="transition: all .3s">
            <img v-lazy="item.icon" :key="item.icon" style="width: 92%;height: initial;margin: 0 4%"/>
            <div class="complex-cell">
              <p class="introduce-title" v-text="item.title"></p>
              <p v-for="child in item.content" >{{child}}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <Footer @goDetails="goDetails"/>
  </section>
</template>

<script>
  import indexJs from "./indexJs";
export default indexJs
</script>

<style scoped>

</style>
